.profile {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  background: linear-gradient(135deg, $white 0%, $white 100%);
  position: relative; // 为绝对定位子元素提供参考

  .backgroundArea {
    position: relative; // 为绝对定位子元素提供参考
    width: 100%;

    .background{
      width: 100%;
      min-height: 456rpx;
      display: block;
      background-color: $primaryBackground;
    }

    .userInfo {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      //background: rgba(255, 255, 255, 0.1); // 半透明背景
      //backdrop-filter: blur(10px); // 毛玻璃效果
      padding: 20rpx 40rpx;
      box-sizing: border-box;

      .avatarContainer {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 52rpx;
          border: 4rpx solid rgba(255, 255, 255, 0.8);
        }

        .userNameInfo {
          flex: 1;
          margin-left: 24rpx;
          display: flex;
          flex-direction: column;

          .userName {
            font-size: 32rpx;
            font-weight: bold;
            color: white;
            margin-bottom: 4rpx;
          }

          .userNameBtn{
            font-size: 24rpx;
            font-weight: bold;
            color: white;
            align-self: flex-start;
          }

          .userPhone {
            font-size: 24rpx;
            color: #ffffff;
          }
        }

        .qrcode {
          display: flex;
          flex-direction: column;
          align-items: center;

          .qrcodeImage {
            width: 50rpx;
            height: 50rpx;
            border-radius: 8rpx;
            margin-bottom: 8rpx;
          }

          .qrcodeText {
            font-size: 20rpx;
            color: white;
          }
        }
      }
    }
  }

  .profile-content {
    flex: 1; // 占据剩余空间
    overflow-y: auto; // 允许垂直滚动
    background: #F7F7F7;
    position: relative;
    z-index: 2;
    padding: 0 0rpx;

    // 如果需要自定义滚动条样式
    &::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }
  }

  .space{
    height: 20rpx;
  }
}
